<template>
	<view class="container">
		<!-- 步骤条 -->
		<view class="flex_step">
			<view class="step_round2"><text>√</text></view>
			<view class="step_line_bule"></view>
			<view class="step_round2"><text>√</text></view>
			<view :class="status==2?'step_line_red':'step_line_bule'"></view>
			<view  :class="status==2?'step_round_fail':'step_round'" v-if="status==2"> <text >x</text></view>
			<view  :class="status==1?'step_round2':'step_round'" v-else-if="status==1"> <text >√</text> </view>
			<view v-else class="step_round" ></view>
		</view>
		<view class="flex_step_title">
			<view class="text">提交资料</view>
			<view class="text">正在审核</view>
			<view class="text">{{status==2?"审核失败":"审核通过"}}</view>
		</view>
		<image v-if="status==0" src="../static/images/auditFailure2.png" mode="aspectFit" class="fail_image"></image>
		<image v-if="status==1" src="../static/images/auditFailure1.png" mode="aspectFit" class="fail_image"></image>
		<image v-if="status==2" src="../static/images/auditFailure.png" mode="aspectFit" class="fail_image"></image>
		<view class="fail_text" v-if="status==0">正在审核中请耐心等待~~</view>
		<view class="fail_text" v-if="status==1">审核成功！！！</view>
		<view class="fail_text" v-if="status==2">抱歉!您的审核提交失败，再去提交一次吧</view>
		<view class="again" @click="again()" v-if="status==2">重新提交审核</view>
		
		<!-- 客服球 -->
		<!-- <navigator url="#"  class="customer_round">
			<image src="../../static/images/CustomerService.png"></image>
			<view class="customer_text">联系客服</view>
		</navigator> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				status:0
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods:{
			again(){//重新提交
				uni.navigateTo({
					url:"/member/distribution/upgrade"
				})
			},
			getInfo(){//获取审核进度
				this.$util.request({
					url:'/mobile/index.php?act=distribution&op=getApplyRs',
					method:'get',
					data:{}
				}).then(res=>{
					this.status=res.datas.status
				})
			},
		}
	}
</script>

<style scoped>
	navigator:hover{
		background-color: #F0F0F0;
	}
	.again{
		background-color: #D8000F;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		text-align: center;
		margin:60rpx 40rpx;
	}
	.flex_step{
		display: flex;align-items: center;justify-content: space-around;margin: 0 55rpx;
	}
	.step_round{
		height: 20rpx;width:20rpx;border:3rpx solid #8fc31f;border-radius: 50%;background-color: #FFFFFF;margin:0 13rpx;
	}
	.step_round2{
		height: 20rpx;width:20rpx;border:3rpx solid #8fc31f;border-radius: 50%;background-color: #8fc31f;margin:0 13rpx;
		color: #FFF9FC;font-size: 20rpx;line-height: 20rpx;
	}
	.step_line_bule{
		border-bottom: 1rpx solid #8fc31f;width: 210rpx;height: 1rpx;
	}
	.step_line_red{
		border-bottom: 1rpx solid #e60012;width: 210rpx;height: 1rpx;
	}
	.step_round_fail{
		height: 22rpx;width:22rpx;border:3rpx solid #e60012;border-radius: 50%;background-color: #FFFFFF;margin:0 13rpx;
		font-size: 20rpx;line-height: 20rpx;text-align: center;background-color:#e60012;color: #FFFFFF;
	}
	.flex_step_title{
		display: flex;align-items: center;justify-content: space-between;padding: 10rpx 30rpx;
	}
	.flex_step_title .text{
		font-size: 30rpx;color: #666666;
	}
	.fail_image{
		height: 175rpx;margin-top: 195rpx;width: 100%;
	}
	.container{
		padding-top: 65rpx;margin: 0 20rpx;position: relative;
	}
	.fail_text{
		margin-top: 45rpx;font-size: 34rpx;text-align: center;color: #333333;
	}
	.customer_round{
		height: 120rpx;width: 120rpx;border-radius: 50%;box-shadow: 0px 0px 10rpx 5rpx rgba(0,0,0,0.2);text-align: center;line-height: 30rpx;
		position: absolute;right: 20rpx;bottom: -300rpx;
	}
	.customer_round image{
		height: 50%;width: 50%;margin-top: 6rpx;
	}
	.customer_text{
		font-size: 20rpx;color: #666666;
	}
</style>
